<template>
  <div>
    <div style="display: flex">
      <div style="margin-left: 16px">
        <img src="@/assets/images/keeper-c-head.png" width="54" height="54" />
      </div>
      <div style="margin-left: 12px; margin-bottom: 6px">
        <div style="font-size: 18px; margin-bottom: 10px">你好,{{ name }}</div>
        <div style="font-size: 12px; color: #666666; margin-bottom: 4px">{{ currentDate }} {{ weekDay }}</div>
        <div
          style="
            background-color: #8a80ff;
            border-radius: 4px;
            color: #fff;
            font-size: 10px;
            width: 163px;
            height: 18px;
            justify-content: center;
            align-items: center;
            display: flex;
          ">
          {{ salon.sname }}
        </div>
      </div>
    </div>
    <!-- 顾客搜索栏 -->
    <div style="position: relative">
      <van-search
        v-model="searchClerkByName"
        show-action
        placeholder="搜索顾客姓名"
        input-align="center"
        shape="round"
        background="transparent"
        @search="loadClerkPage">
        <template #action>
          <div class="clerk_search_bar">
            <van-button
              icon="https://img01.yzcdn.cn/vant/user-active.png"
              type="info"
              size="small"
              plain
              round
              @click.stop="goKeeperAddClerk">
              添加顾客
            </van-button>
          </div>
        </template>
      </van-search>
    </div>
    <!-- 分页 -->
    <div class="clerk_pagination">
      <van-pagination
        v-if="clerkTable.pageCount > 1"
        v-model="clerkTable.currentPage"
        mode="simple"
        :page-count="clerkTable.pageCount"
        @change="loadClerkPage">
        <template #prev-text>
          <van-icon name="arrow-left"></van-icon>
        </template>
        <template #next-text>
          <van-icon name="arrow"></van-icon>
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>
    <!-- 分类搜索 -->
    <div class="clerk_sub_search">
      <van-tabs v-model="searchBarTabs.activeTab" @click="handleClickSearchTab">
        <van-tab :name="searchBarTabs.tabNameAll" title="全部"></van-tab>
        <van-tab v-for="item in searchBarTabs.tabs" :name="item.value" :title="item.title"></van-tab>
      </van-tabs>
    </div>
    <div v-if="searchBarTabs.activeTab !== searchBarTabs.tabNameAll" class="clerk_sub_search_bar">
      <van-dropdown-menu active-color="#3d8dff" style="width: 150px">
        <van-dropdown-item
          v-model="searchBarTabs.subSelected"
          :options="searchBarTabs.subOptions"
          @closed="loadClerkPage"></van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!-- 顾客列表 -->
    <van-list v-model="clerkTable.isFetching" :finished="true" finished-text="没有了" @load="loadClerkPage">
      <div v-for="(item, index) in list" :key="index" class="clerk_list_item" @click="goShowClerkDetail(item, true)">
        <div style="display: flex; justify-content: space-between">
          <div>
            <div style="display: flex; font-size: 12px">
              <div v-if="item.grade === 0" class="item_grade" style="background-color: #eaeffe; color: #5f75bc">
                <img :src="imgUrl(0)" width="18" height="18" style="margin-top: -3px" />
                <span style="vertical-align: top">未定</span>
              </div>
              <div v-else-if="item.grade === 1" class="item_grade" style="background-color: #fef7ea; color: #cc8408">
                <img :src="imgUrl(1)" width="18" height="18" style="margin-top: -3px" />
                <span style="vertical-align: top">C级</span>
              </div>
              <div v-else-if="item.grade === 2" class="item_grade" style="background-color: #f1eafe; color: #8e5bdf">
                <img :src="imgUrl(2)" width="18" height="18" style="margin-top: -3px" />
                <span style="vertical-align: top">B级</span>
              </div>
              <div v-else-if="item.grade === 3" class="item_grade" style="background-color: #feeaea; color: #ff5c60">
                <img :src="imgUrl(3)" width="18" height="18" style="margin-top: -3px" />
                <span style="vertical-align: top">A级</span>
              </div>
              <div v-else-if="item.grade === 4" class="item_grade" style="background-color: #fef8ea; color: #cc8408">
                <img :src="imgUrl(4)" width="18" height="18" style="margin-top: -3px" />
                <span style="vertical-align: top">S级</span>
              </div>
              <div style="margin-left: 0px">
                <van-tag v-if="item.trust2 === 0" type="warning" style="padding: 2px 2px 4px 2px">未设置</van-tag>
                <van-tag v-if="item.trust2 === 1" type="danger" style="padding: 2px 2px 4px 2px">未破冰</van-tag>
                <van-tag v-if="item.trust2 === 2" type="primary" style="padding: 2px 2px 4px 2px">已破冰</van-tag>
                <van-tag v-if="item.trust2 === 3" type="success" style="padding: 2px 2px 4px 2px">已信任</van-tag>
              </div>
              <div
                :style="{
                  color: fltDengjiColor(item.dengji),
                  'background-color': fltDengjiBgColor(item.dengji),
                  display: 'flex',
                  'justify-content': 'center',
                  'align-items': 'center',
                  width: '32px',
                  height: 'auto',
                  'margin-left': '4px',
                  'border-radius': '0px 0px 2px 2px',
                  padding: '4px 2px 4px 2px',
                }">
                {{ item.dengji | fltDengjiType }}
              </div>
              <div
                :style="{
                  color: fltMoneyColor(item.bg2),
                  'background-color': fltMoneyBgColor(item.bg2),
                  display: 'flex',
                  'align-items': 'center',
                  padding: '1px 4px 1px 0',
                  'margin-left': '2px',
                  'border-radius': '0px 0px 2px 2px',
                }">
                <img :src="imgMoneyUrl(item)" width="18" height="18" style="margin-top: -3px" />
                <span style="vertical-align: top">{{ item.bg2 | fltMoneyType }}</span>
              </div>
            </div>
          </div>
          <div
            v-if="item.coachOrderId > 0 || item.noble === 2"
            style="background-color: #fff0f0; color: #ff5555; padding: 1px 4px; display: flex; align-items: center">
            <i v-if="item.coachOrderId > 0" class="el-icon-star-on" style="color: #cc66ff"></i>
            <i v-if="item.noble === 2" class="el-icon-star-on" style="color: red"></i>
          </div>
        </div>

        <div style="display: flex; justify-content: space-between; align-items: center">
          <div style="display: flex; align-items: center">
            <div style="font-size: 14px; margin-left: 16px; margin-right: 8px">
              {{ item.cname }}
            </div>
            <div style="width: 12px; height: 12px; margin: 1px">
              <img v-if="item.sex === 0" src="@/assets/images/consumer-b.png" width="12" height="12" />
              <img v-else src="@/assets/images/consumer-g.png" width="12" height="12" />
            </div>
            <div style="width: 28px; font-size: 12px; color: #666666; text-align: center; padding-top: 4px">
              {{ getAge(item.solar) }}岁
            </div>
          </div>
          <div style="display: flex">
            <div
              style="
                margin-right: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 60px;
                color: #766aff;
                height: 28px;
                background: #ecebff;
                border-radius: 4px;
                border: 0px solid #766aff;
              "
              @click.stop="getTimeline(item)">
              时间线
            </div>
            <div
              v-if="item.rmk === 1"
              style="
                width: 19px;
                height: 15px;
                background: #ff5555;
                color: #fff;
                margin: -8px 0 0 -18px;
                font-size: 9px;
                border-radius: 4px 4px 4px 0px;
                display: flex;
                align-items: center;
                justify-content: center;
              ">
              新
            </div>
            <div
              style="
                margin-right: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ff7510;
                width: 40px;
                height: 28px;
                background: #fff9f5;
                border-radius: 4px 4px 4px 4px;
                border: 0px solid #ff7510;
              "
              @click.stop="getConsumerFangan(item)">
              方案
            </div>
            <div
              v-if="item.fmk === 1"
              style="
                width: 19px;
                height: 15px;
                background: #ff5555;
                color: #fff;
                margin: -8px 0 0 -18px;
                font-size: 9px;
                border-radius: 4px 4px 4px 0px;
                display: flex;
                align-items: center;
                justify-content: center;
              ">
              新
            </div>
            <div
              style="
                margin-right: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #3d8dff;
                width: 60px;
                height: 28px;
                background: #ebf3ff;
                border-radius: 4px 4px 4px 4px;
                border: 0px solid #3d8dff;
              "
              @click.stop="getZiXunDan(item)">
              咨询单
            </div>
            <div
              style="margin-right: 8px; display: flex; display: flex; align-items: center; justify-content: center"
              @click.stop="setSeen(item)">
              <img v-if="item.isSeen === 0" src="@/assets/images/k-unsee.png" width="24" height="24" />
              <img v-else src="@/assets/images/k-see.png" width="24" height="24" />
            </div>
          </div>
        </div>
      </div>
    </van-list>

    <!-- 顾客咨询单 -->
    <van-popup
      v-model="popZiXunDan"
      position="top"
      :close-on-popstate="true"
      :style="{ height: '100%', width: '100%', 'background-color': '#F5F5F5' }">
      <zixundan ref="refZiXunDan" @close="hideZiXunDan"></zixundan>
    </van-popup>

    <!-- 顾客方案 -->
    <van-popup
      v-model="popFangan"
      position="top"
      :style="{ height: '100%', width: '100%', 'background-color': '#F5F5F5' }">
      <fangan ref="refFangan" :base-fangan="baseFangan" @close="hideFangan"></fangan>
    </van-popup>

    <!-- 时间线页面 -->
    <van-popup
      v-model="pages.pageTimeline.popMe"
      position="top"
      :lock-scroll="false"
      :style="{ height: '100vh', width: '100%', 'background-color': '#F5F5F5' }">
      <timeline ref="refTimeline" @closed="hideTimeline"></timeline>
    </van-popup>

    <!-- 顾客详情 -->
    <van-popup
      v-model="popConsumer"
      position="top"
      :style="{ height: '100%', width: '100%', 'background-color': '#F5F5F5' }">
      <clerk-view ref="refClerkView" @closed="handleCloseClerkTag"></clerk-view>
    </van-popup>

    <!-- 添加顾客 -->
    <van-popup
      v-model="pages.pageAddClerk.popMe"
      position="top"
      :lock-scroll="false"
      :style="{ height: '100%', width: '100%', 'background-color': '#F5F5F5' }">
      <clerk-tags
        ref="refClerkTags"
        :key="pages.pageAddClerk.keyForRender"
        :mode="EditMode.m"
        @closed="handleCloseClerkTag"></clerk-tags>
    </van-popup>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getBaseFangan } from '@/api/base';
import { applyNobleById, getClerkPageByKeeperId, setSeen, updateTrust } from '@/api/txs';
import { countRestQuota } from '@/api/ym';
// 引入自定义组件
import ClerkTags from './pop/ClerkTags.vue';
import ClerkView from './pop/ClerkView.vue';
import Fangan from './pop/fangan.vue';
import Timeline from './pop/timeline.vue';
import Zixundan from './pop/zixundan.vue';
// 引入第三方组件
import dayjs from 'dayjs';
import {
  Notify,
  Toast,
  Button as VanButton,
  DropdownItem as VanDropdownItem,
  DropdownMenu as VanDropdownMenu,
  Icon as VanIcon,
  List as VanList,
  Pagination as VanPagination,
  Popup as VanPopup,
  Search as VanSearch,
  Tab as VanTab,
  Tabs as VanTabs,
  Tag as VanTag,
} from 'vant';
import 'vant/lib/button/style';
import 'vant/lib/dropdown-item/style';
import 'vant/lib/dropdown-menu/style';
import 'vant/lib/icon/style';
import 'vant/lib/list/style';
import 'vant/lib/pagination/style';
import 'vant/lib/popup/style';
import 'vant/lib/search/style';
import 'vant/lib/tag/style';
import 'vant/lib/toast/style';
import { mapGetters } from 'vuex';

const SearchBarTabs = [
  {
    title: '消费等级',
    value: 'grade',
    options: [
      { name: '未定', value: 0 },
      { name: 'C级', value: 1 },
      { name: 'B级', value: 2 },
      { name: 'A级', value: 3 },
      { name: 'S级', value: 4 },
    ],
  },
  {
    title: '信任状态',
    value: 'trust2',
    options: [
      { name: '未破冰', value: 1 },
      { name: '已破冰', value: 2 },
      { name: '已信任', value: 3 },
    ],
  },
  {
    title: '运营状态',
    value: 'dengji',
    options: [
      { name: '正常', value: 0 },
      { name: '预警', value: 1 },
      { name: '失速', value: 2 },
      { name: '放弃', value: 3 },
    ],
  },
  {
    title: '消费能力',
    value: 'bg2',
    options: [
      { name: '超有钱', value: 0 },
      { name: '有钱', value: 1 },
      { name: '普通', value: 2 },
      { name: '没钱', value: 3 },
    ],
  },
  {
    title: '需求大小',
    value: 'demandLevel',
    options: [
      { name: '未设置', value: 0 },
      { name: '小', value: 1 },
      { name: '中', value: 2 },
      { name: '大', value: 3 },
    ],
  },
  {
    title: '重点',
    value: 'noble',
    options: [
      { name: '非重点', value: 0 },
      { name: '重点', value: 2 },
    ],
  },
  {
    title: '年龄',
    value: 'age',
    options: [
      { name: '20岁以下', value: 1 },
      { name: '20-30岁', value: 2 },
      { name: '30-40岁', value: 3 },
      { name: '40-50岁', value: 4 },
      { name: '50-60岁', value: 5 },
      { name: '60岁以上', value: 6 },
    ],
  },
  {
    title: '升单品类',
    value: 'xqwj',
    options: [
      { name: '放松（生美）', value: 1 },
      { name: '肤质', value: 2 },
      { name: '肤色', value: 3 },
      { name: '抗衰（肤龄）', value: 4 },
      { name: '塑形-面线条', value: 5 },
      { name: '塑形-面体积', value: 6 },
      { name: '塑形-身体', value: 7 },
      { name: '单部位（鼻、眼、耳、唇、眉、颧、下巴）', value: 8 },
      { name: '私密', value: 9 },
      { name: '胸', value: 10 },
      { name: '大健康', value: 11 },
    ],
  },
];

export default {
  components: {
    VanButton,
    VanList,
    VanPopup,
    VanSearch,
    VanTag,
    VanPagination,
    VanIcon,
    VanTab,
    VanTabs,
    VanDropdownMenu,
    VanDropdownItem,
    ['zixundan']: Zixundan,
    ['fangan']: Fangan,
    ['timeline']: Timeline,
    ['clerk-view']: ClerkView,
    ['clerk-tags']: ClerkTags,
  },
  filters: {
    fltMoneyType(type) {
      switch (type) {
        case 0:
          return '超有钱';
        case 1:
          return '有钱';
        case 2:
          return '普通';
        case 3:
          return '没钱';
        default:
          return '普通';
      }
    },
    fltDengjiType(type) {
      switch (type) {
        case 0:
          return '正常';
        case 1:
          return '预警';
        case 2:
          return '失速';
        case 3:
          return '放弃';
      }
    },
  },
  props: {
    salon: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      baseFangan: {},
      searchBarTabs: {
        tabs: SearchBarTabs,
        tabNameAll: '__all__',
        activeTab: '__all__',
        subOptions: [],
        subSelected: undefined,
      },
      EditMode: { m: 0, EditTagOnly: 0, AddNewClerk: 1, EditClerk: 2 },
      // 管理所有弹窗页面
      pages: {
        pageTimeline: {
          // 沟通时间线页面
          popMe: false,
        },
        pageAddClerk: {
          // 添加顾客页面
          popMe: false,
          keyForRender: 0,
        },
      },
      popConsumer: false,
      popFangan: false,
      popZiXunDan: false, // 是否弹出查看咨询单页面
      currentDate: dayjs().format('YYYY/MM/DD'),
      searchClerkByName: '',
      // consumerObj 点击的顾客信息
      consumerObj: {
        pic: undefined,
      },
      list: [],
      clerkTable: { currentPage: 1, pageSize: 10, pageCount: 0, isFetching: false },
    };
  },
  computed: {
    ...mapGetters(['openId', 'name', 'id']),
    weekDay: function () {
      const days = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const today = new Date();
      const weekday = today.getDay();
      return days[weekday];
    },
  },
  watch: {
    salon(newVal, oldVal) {
      this.loadClerkPage();
    },
  },
  created() {
    // console.log(this.salon);
    getBaseFangan().then(res => {
      this.baseFangan = res.data.data;
    });
    this.loadClerkPage();
  },
  methods: {
    fltDengjiColor(type) {
      switch (type) {
        case 0:
          return '#3A974C';
        case 1:
          return '#FF7510';
        case 2:
          return '#FF5555';
        case 3:
          return '#666666';
      }
    },
    fltDengjiBgColor(type) {
      switch (type) {
        case 0:
          return '#F5FFF0';
        case 1:
          return '#FFF6F0';
        case 2:
          return '#FEF9F9';
        case 3:
          return '#F5F5F5';
      }
    },
    fltMoneyColor(type) {
      switch (type) {
        case 0:
          return '#CC8408';
        case 1:
          return '#FF5C60';
        case 2:
          return '#8E5BDF';
        case 3:
          return '#999999';
        default:
          return '#8E5BDF';
      }
    },
    fltMoneyBgColor(type) {
      switch (type) {
        case 0:
          return '#FEF8EA';
        case 1:
          return '#FEF4F4';
        case 2:
          return '#F4EFFE';
        case 3:
          return '#FEFBEA';
        default:
          return '#F4EFFE';
      }
    },
    loadClerkPage: async function () {
      if (this.clerkTable.isFetching) {
        return;
      }
      this.clerkTable.isFetching = true;
      const params = { sid: this.openId, kid: this.id };
      params.pageNumber = this.clerkTable.currentPage;
      params.pageSize = this.clerkTable.pageSize;
      if (
        this.searchBarTabs.activeTab !== this.searchBarTabs.tabNameAll &&
        this.searchBarTabs.subSelected !== undefined
      ) {
        params[this.searchBarTabs.activeTab] = this.searchBarTabs.subSelected;
      }
      if (this.searchClerkByName) {
        params.cname = this.searchClerkByName;
      }
      const errAlertMsg = '查询顾客列表失败';
      await getClerkPageByKeeperId(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          this.list.splice(0, this.list.length);
          const ret = res.data.data;
          if (ret) {
            const total = ret.total;
            if (total && total > 0) {
              this.clerkTable.pageCount = Math.ceil(total / this.clerkTable.pageSize);
            }
            if (ret.records && ret.records.length > 0) {
              this.list.push(...ret.records);
            }
          }
        })
        .catch(err => {
          console.error(err);
          Notify({ type: 'danger', message: errAlertMsg });
        })
        .finally(() => {
          this.clerkTable.isFetching = false;
        });
    },
    handleClickSearchTab: async function (tabName, title) {
      this.searchBarTabs.activeTab = tabName;
      this.searchBarTabs.subSelected = undefined;
      this.searchBarTabs.subOptions.splice(0, this.searchBarTabs.subOptions.length);
      if (tabName === this.searchBarTabs.tabNameAll) {
        this.loadClerkPage();
        return;
      }
      const subItem = this.searchBarTabs.tabs.find(x => x.value === tabName);
      if (subItem && subItem.options) {
        this.searchBarTabs.subOptions.push({ text: '--请选择--', value: undefined });
        subItem.options.forEach(x => {
          this.searchBarTabs.subOptions.push({ text: x.name, value: x.value });
        });
      }
    },
    applyTrust(id, t1, t2) {
      // console.log(t1);
      const dataInfo = new FormData();
      dataInfo.append('trust', t1);
      dataInfo.append('trust2', t2);
      updateTrust(id, dataInfo);
      Notify({ type: 'success', message: '提交成功' });
    },
    applyNoble(id) {
      applyNobleById(id, 1);
      Notify({ type: 'success', message: '提交成功' });
    },
    setSeen(val) {
      val.isSeen = (val.isSeen + 1) % 2;
      setSeen(val.id);
    },
    getZiXunDan: async function (item) {
      this.popZiXunDan = true;
      await this.$nextTick();
      this.$refs.refZiXunDan.loadZiXunDan(item.id);
    },
    hideZiXunDan() {
      this.popZiXunDan = false;
    },
    getConsumerFangan: async function (item) {
      item.fmk = 0;
      this.consumerObj = Object.assign({}, item);
      this.popFangan = true;
      await this.$nextTick();
      this.$refs.refFangan.getConsumerFangan(item);
    },
    hideFangan() {
      this.popFangan = false;
    },
    getAge(bd) {
      if (bd) {
        const birthday = dayjs(bd.replace('年', '-').replace('月', '-').replace('日', ''));
        const now = dayjs();
        return now.diff(birthday, 'year');
      }
      return 0;
    },
    imgUrl(grade) {
      const g = grade !== null ? grade : 0;
      return require('@/assets/images/keeper-c-' + g + '.png');
    },
    imgMoneyUrl(grade) {
      const g = grade.bg2 !== null ? grade.bg2 : 2;
      return require('@/assets/images/money_' + g + '.png');
    },
    goKeeperAddClerk: async function () {
      let remainClerkNum = 0;
      const errAlertMsg = '获取剩余试用名额失败';
      await countRestQuota(this.openId)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          remainClerkNum = res.data.data;
        })
        .catch(err => {
          console.error(err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
      if (remainClerkNum <= 0) {
        Toast({
          message: '试用期用户已达上限',
          position: 'top',
        });
        return;
      }
      this.EditMode.m = this.EditMode.AddNewClerk;
      this.pages.pageAddClerk.popMe = true;
      this.pages.pageAddClerk.keyForRender++;
      await this.$nextTick();
      this.$refs.refClerkTags.addOrEditClerk();
    },
    goShowClerkDetail: async function (item, val) {
      item.rmk = 0;
      this.EditMode.m = this.EditMode.EditClerk;
      this.popConsumer = true;
      await this.$nextTick();
      this.$refs.refClerkView.loadClerk(item);
    },
    handleCloseClerkTag: async function (refresh) {
      if (refresh) {
        // 修改或添加顾客信息成功, 刷新列表
        this.loadClerkPage();
      }
      this.popConsumer = false;
      this.pages.pageAddClerk.popMe = false;
    },
    getTimeline: async function (item) {
      this.consumerObj = Object.assign({}, item);
      this.pages.pageTimeline.popMe = true;
      await this.$nextTick();
      this.$refs.refTimeline.loadRecord(item);
    },
    hideTimeline: async function () {
      this.pages.pageTimeline.popMe = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.clerk_search_bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.clerk_pagination {
  display: block;
  padding: 0 0 10px 0;
}
.clerk_sub_search {
  margin: 0 0 5px 0;
  padding: 10px 0 20px 0;
}
.clerk_sub_search_bar {
  margin: 0 0 10px 0;
  padding: 0 20px 10px 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

::v-deep .clerk_search_bar .van-button--info {
  color: #3d8dff;
  border-color: #ebf3ff;
}
::v-deep .clerk_pagination .van-pagination__item {
  background: none;
  background-color: none;
  height: 30px;
}
::v-deep .clerk_pagination .van-pagination__page-desc {
  height: 30px;
}
::v-deep .clerk_sub_search .van-tabs__nav {
  background: none;
  background-color: none;
}
::v-deep .clerk_sub_search .van-tabs__line {
  background-color: #90beff;
}
::v-deep .clerk_sub_search .van-tabs--line .van-tabs__wrap {
  height: 40px;
}
::v-deep .clerk_sub_search_bar .van-dropdown-menu__bar {
  height: 45px;
  color: #3d8dff;
  background: none;
}
::v-deep .clerk_sub_search_bar .van-dropdown-menu__title {
  color: #3d8dff;
}

.clerk_list_item {
  margin: 0 16px 12px 16px;
  padding: 0 0 10px 0;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: space-between;
  gap: 26px;
  background-color: #fff;
  border-radius: 8px;

  .item_grade {
    padding: 1px 4px 1px 0px;
    display: flex;
    align-items: center;
    margin-right: 4px;
  }
}
</style>
